<template>
  <div class="channelList">
    <div class="top">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" class="demo-ruleForm">
       <div style="display:flex;">
          <el-form-item label="航空公司" prop="airlinerId" style="display:flex;margin:0 50px 0 0">
              <el-select clearable v-model="ruleForm.airlinerId" filterable placeholder="请选择">
                <el-option
                    v-for="item in airportLists"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </el-form-item>
        <el-form-item
          label="出票途径"
          prop="ticketingChannel"
          style="display: flex; margin: 0 20px 0 0">
         <el-select clearable v-model="ruleForm.ticketingChannel"   placeholder="请选择">
           <el-option
              v-for="item in issuebill"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
       </div>
         <div style="display:flex;margin:15px 0 0 0">
          <!--   prop="departure"-->
          <el-form-item label="出发地：" style="display:flex;margin:0 50px 0 0">
              <el-select clearable v-model="ruleForm.departure" filterable placeholder="请选择">
                <el-option
                    v-for="item in CityList"
                    :key="item.airportId"
                    :label="item.airportCityName"
                    :value="item.airportId">
                  </el-option>
                </el-select>
          </el-form-item>
           <el-form-item label="到达地：" style="display:flex;margin:0 50px 0 0">
            <!-- prop="arrival" -->
              <el-select clearable v-model="ruleForm.arrival" filterable placeholder="请选择">
                <el-option
                    v-for="item in CityList"
                    :key="item.airportId"
                    :label="item.airportCityName"
                    :value="item.airportId">
                  </el-option>
                </el-select>
          </el-form-item>
       </div>
        <div style="display:flex;margin:15px 0 0 0">
           <el-form-item
          label="舱位"
          prop='cabin'
          style="display: flex; margin: 0 20px 0 0">
        <el-input  style="width:200px" type="textarea" :rows="1" v-model="ruleForm.cabin"></el-input>
        </el-form-item>
       
        <div style="color:red;font-size:13px;margin:4px 0 0 0">*多个舱位  | 分开</div>
        </div>
       <div style="display:flex; margin: 15px 0 0 0">
         <el-form-item
         prop="bigcustomer"
          label="大客户编码"
          style="display: flex; margin: 0 20px 0 0"
        >
            <el-input  style="width:200px" type="textarea" :rows="1" v-model="ruleForm.bigcustomer"></el-input>
        </el-form-item>
        <el-form-item
          style="display: flex; margin: 0 20px 0 0"
        >
           <el-checkbox v-model="ruleForm.isPnrrmk">是否需要在PNR中备注大客户编码</el-checkbox>
        </el-form-item>
       </div>
         <div style="display:flex; margin: 15px 0 0 0">
            <el-form-item
              label="开始时间"
              prop="starttime"
              style="display: flex; margin: 0 20px 0 0">
             <el-date-picker
              :value-format="format"
               v-model="ruleForm.starttime"
               type="datetime"
                placeholder="选择日期">
              </el-date-picker>
           </el-form-item>
            <el-form-item
              label="结束时间"
               prop="endtime"
              style="display: flex; margin: 0 20px 0 0">
              <el-date-picker
                :value-format="format"
               v-model="ruleForm.endtime"
               type="datetime"
                placeholder="选择日期">
              </el-date-picker>
           </el-form-item>
         </div>

        <div style="display:flex; margin: 15px 0 0 0">
          <el-form-item
              label="航班开始时间"
             
              style="display: flex; margin: 0 20px 0 0">
             <el-date-picker
               :value-format="format"
               v-model="ruleForm.flightdateSetOff"
                 type="datetime"
                placeholder="选择日期">
              </el-date-picker>
           </el-form-item>
            <el-form-item
              label="航班结束时间"
             
              style="display: flex; margin: 0 20px 0 0">
              <el-date-picker
                :value-format="format"
               v-model="ruleForm.flightdateBack"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
           </el-form-item>
            <!-- <el-form-item
              label="航班时间"
              prop="flightdate"
              style="display: flex; margin: 0 20px 0 0"> -->
               <!-- <el-date-picker
                v-model="ruleForm.flightdate"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker> -->
               <!-- <el-date-picker
                  v-model="ruleForm.flightdate"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
           </el-form-item> -->
        </div>
        <div style="display:flex; margin: 15px 0 0 0">
          <el-form-item
          prop="checkList"
              label="订单来源"
              style="display: flex; margin: 0 20px 0 0">
               <el-checkbox-group v-model="ruleForm.checkList">
                 <!-- <el-checkbox label="Telephone" name="checkList">电话</el-checkbox>
                 <el-checkbox label="Online" name="checkList">网上</el-checkbox> 
                 <el-checkbox label="Phone" name="checkList">手机</el-checkbox>
                 <el-checkbox label="Wap" name="checkList">wap</el-checkbox>
                 <el-checkbox label="Agent" name="checkList">代理商</el-checkbox>
                 <el-checkbox label="ShortMessage" name="checkList">短信</el-checkbox>
                 <el-checkbox label="Import" name="checkList">导入</el-checkbox>
                 <el-checkbox label="Trafree" name="checkList">TRAFREE</el-checkbox>
                 <el-checkbox label="Travel" name="checkList">差旅</el-checkbox> -->
                  <el-checkbox label="App" name="checkList">App</el-checkbox> 
                  <el-checkbox label="Applets" name="checkList">小程序</el-checkbox> 
                  <el-checkbox label="CRM" name="checkList">CRM</el-checkbox> 
                  <el-checkbox label="BigCustomer" name="checkList">大客户</el-checkbox> 
                </el-checkbox-group>
           </el-form-item>
        </div>
         <div style="display:flex; margin: 15px 0 0 0">
            <el-form-item
            prop="distributionList"
              label="配送方式"
              style="display: flex; margin: 0 20px 0 0">
                <el-checkbox-group v-model="ruleForm.distributionList">
                 <!-- <el-checkbox label="UrbanArea">市区送票</el-checkbox>  -->
                 <el-checkbox label="Airport">机场取票</el-checkbox>
                 <el-checkbox label="SendByPost">邮寄客票</el-checkbox>
                 <el-checkbox label="UrbanArea">市区送票</el-checkbox>
                 <el-checkbox label="reserve">保留行程单</el-checkbox>
                 <el-checkbox label="Itinerary">无需行程单</el-checkbox>
                </el-checkbox-group>
           </el-form-item>
         </div>
          <div style="display:flex;margin:15px 0 0 0">
           <el-form-item
          label="航班号"
          style="display: flex; margin: 0 20px 0 0">
           <!-- prop="flightno" -->

         <el-input style="width:300px" v-model="ruleForm.flightno"></el-input>
        </el-form-item>
        <el-form-item
        prop="passengersrado"
          label="是否验证乘客"
          style="display: flex; margin: 0 20px 0 0">
         <el-radio-group v-model="ruleForm.passengersrado">
            <el-radio :label="2">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        </div>
         <!-- <div style="display:flex;margin:15px 0 0 0">
           <el-form-item
          label="上传乘客"
          style="display: flex; margin: 0 20px 0 0">
         <el-input  style="width:550px" type="textarea" :rows="1" v-model="ruleForm.name"></el-input>
        </el-form-item>
        </div> -->
        <div style="display:flex;margin:15px 0 0 0">
           <el-form-item
          label="上传文件"
          style="display: flex; margin: 0 20px 0 0">
          <!-- :file-list="fileList" -->
         <el-upload
            class="upload-demo"
            action="/flight/adjust/flightAdjustPassengerVo"
            :on-success='uploadedsuccessfully'
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" style="color:red">	PS:文件格式  姓名 证件号 不能颠倒 姓名在前 证件号在后！！！！！！！</div>
          </el-upload>
        </el-form-item>
        </div>
         <div style="display:flex;margin:15px 0 0 0">
           <el-form-item
           prop="issDesc"
          label="出票异常描述"
          style="display: flex; margin: 0 20px 0 0">
         <el-input  style="width:300px" type="textarea" :rows="1" v-model="ruleForm.issDesc"></el-input>
        </el-form-item>
        <el-form-item
        prop="apply"
          label="是否适用所有乘客"
          style="display: flex; margin: 0 20px 0 0">
            <el-radio-group v-model="ruleForm.apply">
              <el-radio :label="0">不适用</el-radio>
              <el-radio :label="1">适用</el-radio> 
            </el-radio-group>
        </el-form-item>
        </div>
          <div style="display:flex;margin:15px 0 0 0">
           <el-form-item
           prop="cashbacktype"
          label="返现类型"
          style="display: flex; margin: 0 20px 0 0">
          <el-radio-group v-model="ruleForm.cashbacktype">
              <el-radio :label="1">金额</el-radio>
              <el-radio :label="2">比例</el-radio> 
            </el-radio-group>
        </el-form-item>
        </div>
         <div style="display:flex;margin:15px 0 0 0">
            <el-form-item
            prop="vipPolicyAmount"
          label="数值(例如填8，当返现类型为金额时代表返现8元，当返现类型为比例时代表返现8%)"
          style="display: flex; margin: 0 20px 0 0">
          <el-input   type="textarea" :rows="1" v-model="ruleForm.vipPolicyAmount"></el-input>
         </el-form-item>
         </div>
        <div style="display:flex;margin:15px 0 0 0">
           <el-form-item
           prop="cpMark"
          label="出票指令(多个用|隔开)"
          style="display: flex; margin: 0 20px 0 0">
         <el-input  style="width:200px" type="textarea" :rows="1" v-model="ruleForm.cpMark"></el-input>
        </el-form-item>
        <el-form-item
          label="PAT标示"
          style="display: flex; margin: 0 20px 0 0">
         <el-input  style="width:200px" type="textarea" :rows="1" v-model="ruleForm.patMark"></el-input>
        </el-form-item>
        </div>
        <div style="display:flex;margin:15px 0 0 0">
          <el-form-item style="margin:0 0 0 0">
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="returnList">返回</el-button>
        </el-form-item>
        </div>
      </el-form>
      <!-- 表格 -->    
    </div>
    <div  v-if="auxiliary.length>0">
       <el-table
     @selection-change="handleSelectionChange"
     style="margin:40px 0 0 0"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="auxiliary" size="mini" border  stripe >
        <el-table-column type="selection" width="100" >
        </el-table-column>
      <!-- <el-table-column label="政策编号" prop="airportName" width="120" ></el-table-column> -->
      <el-table-column label="姓名" prop="name" ></el-table-column>
      <el-table-column  label="证件号" prop="cardId" ></el-table-column>
    </el-table>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'channelList',
  data() { 
    return {
     format: "yyyy-MM-dd hh:mm:ss",
      flightAdjustPassengerList:[],
      // 出票途径
      issuebill:[
        {
          value:"1",
          label:"BPS"
        },
         {
          value:"2",
          label:"B2B"
        },
         {
          value:"3",
          label:"外购"
        },
         {
          value:"4",
          label:"航空直连"
        },
         {
          value:"5",
          label:"全部"
        },
         {
          value:"6",
          label:"三方协议"
        },
         {
          value:"7",
          label:"航司客服改期"
        }
      ],
       querySearch:[],
      //航空公司
      airportLists:[], 
      // 下方表格
      auxiliary:[],
      CityList:[],//机场城市列表
      ruleForm:{
        arrival:"",
        departure:"",
        endtime:"",
        starttime:"",
         // 适用乘客
      apply:1,
          isPnrrmk:true,
      cashbacktype:1,
        passengersrado:1,
         distributionList:[],
         checkList:[],
         cityId:'',
         airlinerId:"",
         cabin:"",
         ticketingChannel:"",
          flightdateSetOff:"",
          flightdateBack:"",
         ordersorce:"",
         deliverytype:"",
         bigcustomer:"",
         flightno:"",
         issDesc:"",
         vipPolicyAmount:"",
         cpMark:"",
         patMark:"",
      },
       // 校验
        rules: {
          airlinerId: [
            { required: true, message: '请选择航空公司', trigger: 'change' },
          ],
           departure: [
            { required: true, message: '请选择出发地', trigger: 'change' },
          ],
           arrival: [
            { required: true, message: '请选择到达地', trigger: 'change' },
          ],
         ticketingChannel: [
            { required: true, message: '请选择出票途径', trigger: 'change' },
          ],
          cabin: [
            { required: true, message: '请输入舱位，用|隔开', trigger: 'blur' },
          ],
          // cityId: [
          //   { required: true, message: '请选择城市', trigger: 'change' },
          // ],


           bigcustomer: [
            { required: true, message: '请输入大客户编码', trigger: 'change' },
          ],
           starttime: [
            { type: 'string', required: true, message: '请选择开始时间', trigger: 'change' },
          ],
           endtime: [
            { type: 'string', required: true, message: '请选择结束时间', trigger: 'change' },
          ],
          //  flightdateSetOff: [
          //   { type: 'date', required: true, message: '请选择航班开始时间', trigger: 'change' },
          // ],
          //  flightdateBack: [
          //   { type: 'date', required: true, message: '请选择航班结束时间', trigger: 'change' },
          // ],
           checkList: [
            {  type: 'array', required: true, message: '请选择订单来源', trigger: 'change'  },
          ],
           distributionList: [
            {  type: 'array' , required: true, message: '请选择配送方式', trigger: 'change' },
          ],
           flightno: [
            { required: true, message: '请输入航班号', trigger: 'blur' },
          ],
           passengersrado: [
            {  required: true, message: '请选择是否验证乘客', trigger: 'change' },
          ],
           issDesc: [
            { required: true, message: '请输入出票异常描述', trigger: 'change' },
          ],
           apply: [
            { required: true, message: '请选择是否适用所有乘客', trigger: 'change' },
          ],
           cashbacktype: [
            { required: true, message: '请选择返现类型', trigger: 'change' },
          ],
           vipPolicyAmount: [
            { required: true, message: '请输入数值', trigger: 'blur' },
          ],
           cpMark: [
            { required: true, message: '请输入出票指令', trigger: 'blur' },
          ],
        },
    }
  },
  methods:{
    handleSelectionChange(passengerList){
      console.log(passengerList)
      this.flightAdjustPassengerList=passengerList
    },
    // 文件上传成功
    uploadedsuccessfully(row){
      console.log(row)
      this.auxiliary=row.data
    },
    //文件上传 
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      dateChange(roq) {
        console.log(roq,this.ruleForm.starttime,)
      },
      // 新增接口
      getaddFlightAdjust(){
        if(this.ruleForm.isPnrrmk==true){
          this.ruleForm.isPnrrmk='1'
        }else{
          this.ruleForm.isPnrrmk='0'
        }
        localStorage.setItem('isToken',true)
        this.$axios.getaddFlightAdjust({
          departure:this.ruleForm.departure,
          // 出发地
          arrival:this.ruleForm.arrival,
          //抵达地
          isPnrrmk:this.ruleForm.isPnrrmk,
          // 航司三字码
          airlinerId:this.ruleForm.airlinerId,
          // 舱位
          cabin:this.ruleForm.cabin,
          // 开始时间
          tmpStarttime:this.ruleForm.starttime,
          // 结束时间
          tmpEndtime:this.ruleForm.endtime,
          // 订单来源
          ordersorceList:this.ruleForm.checkList,
          // 配送方式,
          deliverytypeList:this.ruleForm.distributionList,
          // 时间开始
           flightdateSetOff:this.ruleForm. flightdateSetOff,
          // 结束时间
          flightdateBack:this.ruleForm.flightdateBack,
          // 大客户编码
          bigcustomer:this.ruleForm.bigcustomer,
          // 航班号
          flightno:this.ruleForm.flightno,
          // 是否验证白名单
          ischeckinfo:this.ruleForm.passengersrado,
          // 出票异常描述
          issDesc:this.ruleForm.issDesc,
            // 所有乘客
            fitGuest:this.ruleForm.apply,
            // 返现类型
            vipPolicyType:this.ruleForm.cashbacktype,
            // 返现金额
            vipPolicyAmount:this.ruleForm.vipPolicyAmount,
            // 出票指令
            cpMark:this.ruleForm.cpMark,
            // pat价格
            patMark:this.ruleForm.patMark,
            // 出票途径
            ticketingChannel:this.ruleForm.ticketingChannel,
            // 城市id
            cityId:this.ruleForm.cityId,
            flightAdjustPassengerList:this.flightAdjustPassengerList
        }).then((res)=>{
          console.log(res)
          if(res.code=='200'){
             this.$message({
          message: '新增成功',
          type: 'success'
        });
        this.$router.go(-1);
          }else{
             this.$message({
             message: '新增失败，请客对信息重新新增',
            type: 'warning'
        });
          }
        })
      },
      // 返回按钮
      returnList(){
        this.$router.push({
          name:"adjustPassenger"
        })
      },
     // 新增确定按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getaddFlightAdjust()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
       // 城市
     getselectCityList(){
      this.$axios.getselectCityList({

      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
           let list = JSON.parse(JSON.stringify(res.data));
          this.querySearch = list.map((item) => {
            return { label: item.cityName, value: item.cityId };
          });
          console.log(this.querySearch);
        }
      })
    },
    // 获取城市列表
      getCityList() {
        this.$axios.postcityList().then((res) => {
         
           this.CityList = res.data
        });
      },
    // 航空公司列表
     getairportList() {
        localStorage.removeItem("pageNum");
      localStorage.removeItem("pageSize");
      this.$axios.getairportList({}).then((res) => {
        console.log(res);
           localStorage.setItem("pageNum", 1);
      localStorage.setItem("pageSize", 10);
        if (res.code == "200") {
        
         let list = JSON.parse(JSON.stringify(res.data));
          this.airportLists = list.map((item) => {
            return { label: item.airliner, value: item.airlinerId };
          });
          console.log(this.airportLists);
        }
      });
     
    },
  },
  mounted() {
      // 航空公司
    this.getairportList()
    // 城市
    this.getselectCityList()
    // 机票城市列表
    this.getCityList()
  },
 }
</script>

<style  scoped>
.channelList{
  margin: 20px;
}
.top{
 display: flex;
 justify-content:center;
}
</style>